<script setup lang="ts">
import { watch } from "vue";
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  tableHeader: {
    type: Array as PropType<TableColumn[]>, // 添加类型定义
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
});
watch(
  () => props.tableData,
  newVal => {
    spanPropGroup(newVal); // 合并行
  }
);
// 定义表格列
interface TableColumn {
  label: string;
  width: string;
}

//需要判断的属性组
const spanProps = [
  "firstLevelName",
  "secondLevelName",
  "totalAmountFormat",
  "totalCostFormat"
];

let rowSpansMap = new Map(); //存需要开始合并的行号，向下合并多少行

/**
 * 根据列表数据得出需要合并的行
 * @param data 列表数据
 */
const spanPropGroup = (data: any) => {
  let oldRow: any = null; //需要合并的行
  rowSpansMap = new Map(); //重置Map

  oldRow = data[0]; //默认第0行为需要合并的行
  rowSpansMap.set(0, 1); //第0行，向下合并一行(其实就是自己单独一行)
  let spanRow = 0; //记录需要开始合并的行号
  for (let i = 1; i < data.length; i++) {
    const item = data[i];
    let isSame = true;
    //遍历需要判断的属性判断对应值是否全部相等
    for (let j = 0; j < spanProps.length; j++) {
      const prop = spanProps[j];
      //只要有一个属性值不相等则记录新的需要合并的行号
      if (item[prop] != oldRow[prop]) {
        oldRow = item;
        rowSpansMap.set(i, 1);
        spanRow = i;
        isSame = false;
        break;
      }
    }
    //如果所有属性值相同则所需要合并的行数+1
    if (isSame) {
      let span = rowSpansMap.get(spanRow);
      rowSpansMap.set(spanRow, span + 1);
    }
  }
};

const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }) => {
  //采样值1-5列所对应的行不需要合并
  if (columnIndex != 2 && columnIndex != 3 && columnIndex != 4) {
    //根据当前行号从map中获取开始合并的行根据当前行号从map中获取开始合并的行号，向下合并多少行
    const span = rowSpansMap.get(rowIndex);
    if (span != null) {
      return {
        rowspan: span, //向下合并span行
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};
</script>

<template>
  <div>
    <px-table
      v-loading="loading"
      :data="tableData"
      :span-method="objectSpanMethod"
      height="540"
      border
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(59, 130, 246, 0.10)',
        color: '#606266'
      }"
    >
      <px-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :prop="index"
        :label="item.label"
        :width="item.width"
      />
    </px-table>
  </div>
</template>
